<template>
    <input class="onekit-input"
           :class="onekitClass"
           :style="onekitStyle"
           :id="onekitId"
           :type="password ? 'password' : 'text'"
           :placeholder="placeholder"
           :disabled="disabled ? 'disabled' : false"
           :maxlength="maxlength"
           :autofocus="focusNew ? 'autofocus' : ''"
           @focus="_focus"
           @blur="_blur"
           @keydown="_confirm"
           v-model="val"
           @input="_input"
           ref="is" />
</template>

<script>
import weixin_behavior from "../../behaviors/weixin_behavior";
import onekit_behavior from "../../behaviors/onekit_behavior";
import eventBus from "../../api/EventBus";
export default {
  name: "onekit-input",
  mixins: [weixin_behavior, onekit_behavior],
  data () {
    return {
      focusNew: "false",
      val: this.value + ""
    };
  },
  props: {
    value: { type: [String ,Number], default: "" },
    type: String,
    password: [Boolean, String],
    placeholder: String,
    "placeholder-style": String,
    disabled: [Boolean, String],
    maxlength: {
      type: [String, Number],
      default: 140,
    },
    focus: [Boolean, String],
    "cursor-spacing": [Number, String],
    cursor: [Number, String],
    "selection-start": [Number, String],
    "selection-end": [Number, String],
    "adjust-position": {
      type: [Boolean, String],
      default: true,
    },
    "confirm-type": {
      type: String,
      default: "done",
      desc: "h5 is not support",
    },
  },
  computed: {
    newType () {
      let newType;
      switch (this.type) {
        case "text":
          newType = "text";
          break;
        case "number":
          newType = "[0-9]*";
          break;
        case "digit":
          newType = "number";
          break;
        default:
      }
      return newType;
    },
  },
  created () { },
  watch: {
    value:{
            deep: true,
      handler (v) {
        this.$refs.is.value = v
      }
    },
    focus: {
      deep: true,
      handler (v) {
        if (v) this.focusNew = "autofocus";
      },
      immediate: true,
    },
    placeholderStyle: {
      deep: true,
      handler (v) {
        if (v) {
          const keyAndValArr = v.split(":");
          const val = keyAndValArr[1].replace(";", "");
          this.$refs.is.style.setProperty("--placeholderColor", val);
        }
      },
    },
  },
  methods: {
    _focus (e) {
      if (this.adjustPosition) {
        window.scroll(0, 0);
      }
      const {
        changedTouches,
        currentTarget,
        target,
        timeStamp,
        touches,
        type,
      } = e;
      const detail = {
        value: this.val,
      };

      const focusData = {
        changedTouches,
        currentTarget,
        target,
        detail,
        timeStamp,
        touches,
        type,
      };

      this.$emit("Focus", focusData);
    },
    _blur (e) {
      const {
        changedTouches,
        currentTarget,
        target,
        timeStamp,
        touches,
        type,
      } = e;
      const detail = {
        value: this.val,
      };

      const blurData = {
        changedTouches,
        currentTarget,
        target,
        detail,
        timeStamp,
        touches,
        type,
      };
      this.$emit("Blur", blurData);
    },
    _confirm (e) {
      if (e.key === "Enter") {
        this.$emit("Confirm");
      }
    },
    _input (e) {
      const { currentTarget, target, timeStamp, touches } = e;
      const detail = {
        cursor: this.val.length,
        value: this.val,
      };
      const type = "input";

      const inputData = {
        currentTarget,
        detail,
        target,
        timeStamp,
        touches,
        type,
      };
      this.$emit("Input", inputData);
      eventBus.$emit("onekit-input-submit", inputData.detail.value);
    },
  },
  mounted () {
    this.$refs.is.style.setProperty("--placeholderColor", "#999");
    if (this.placeholderStyle) {
      const keyAndValArr = this.placeholderStyle.split(":");
      this.$refs.is.style.setProperty("--placeholderColor", keyAndValArr[1].replace(";", ""));
    }
    eventBus.$on("onekit-foem-item-reset", () => {
      this.val = "";
      eventBus.$emit("onekit-input-submit", this.val);
    });
  },
};
</script>

<style scoped>
.onekit-input::placeholder {
  color: var(--placeholderColor);
}
</style>
